<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :label="$t('table.Day')" name="first" >
        <daychart v-if="activeName === 'first'" style="width: 100%;height: 600px"/>
      </el-tab-pane>
      <el-tab-pane :label="$t('table.Month')" name="second" >
        <monthchart v-if="activeName === 'second'" style="width: 100%;height: 600px"/>
      </el-tab-pane>
      <el-tab-pane :label="$t('table.Year')" name="third" >
        <yearchart v-if="activeName === 'third'" style="width: 100%;height: 600px"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import i18n from '@/lang/index'
import Daychart from './daychart'
import Monthchart from './monthchart'
import Yearchart from './yearchart'

export default {
  name: 'UserChart',
  components: { Yearchart, Monthchart, Daychart },
  directives: { },
  filters: {
  },
  data() {
    return {
      activeName: 'first'
    }
  }

}
</script>
